import React, { PureComponent } from 'react'
import { Form, Input, Radio, Cascader, Checkbox, message, Card, Button,Upload } from 'antd';
import { QuestionTypeSelect, HardLevel, QuestionBankCheckbox } from './AntComponents';
import { getQuestionDetail, editQuestion } from '@/services/questionsBank';
import { getSubject } from '@/services/lessons'
import {fileurl} from '@/services/baseurl'
import { isArray } from 'lodash';
const layout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 8 },
};
const taillayout = {
    wrapperCol: { offset: 2, span: 16 },
};
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;
export default class Edit extends PureComponent<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            bank: null,
            subject: '',
            type: '1',
            hardLevel: '',
            content: '',
            answer: null,
            answerIntroduce: '',
            audit: '0',
            answerA: '',
            answerB: '',
            answerC: '',
            answerD: '',
            answerE: '',
            answerF: '',
            subjectOptions: [],
            fileList:[],
            old_img:'',
        }
    }
    changeValue=(e:any,name:string)=>{
        this.setState({
            [name]:e
        })
    }
    changeValueWithTarget=(e:any,name:string)=>{
        this.setState({
            [name]:e.target.value
        })
    }
    changeBank = (e: any) => {
        this.setState({
            bank: e
        })
    }
    changeType = (e: any) => {
        this.setState({
            type: e,
            answer: null
        })
    }
    changeHardLevel = (e: any) => {
        this.setState({
            hardLevel: e
        })
    }
   
    changeFileList=(e:any)=>{
        const fileList = e.fileList;
        let file = null;
        if (fileList.length > 1) {
          file = [fileList[fileList.length - 1]];
        } else {
          file = fileList
        }
        this.setState({
            fileList:file
        })
    }
    submitHandle = () => {
        const { bank, subject, type, hardLevel, content, answer, answerIntroduce, audit,
            answerA, answerB, answerC, answerD, answerE, answerF ,fileList,old_img} = this.state;
        if (!bank || !subject || !type || !content || !answer) {
            return message.error('请完善试题信息')
        }
        editQuestion({
            id: this.props.match.params.id,
            types: bank,
            type,
            subject,
            complexity: hardLevel,
            content,
            a: answerA || '', b: answerB || '', c: answerC || '', d: answerD || '', e: answerE || '', f: answerF || '',
            answer:isArray(answer)?answer.join(',').replace(/,/g,''):answer, answer_that: answerIntroduce || '', is_audit: audit,img:fileList[0]?fileList[0].originFileObj:'',old_img
        }).then(res => {
            if (res.status === 1) {
                message.success('编辑成功')
                history.back()
            } else {
                message.error('编辑失败')
            }
        })
    }
    goBack = () => {
        history.back()
    }
    componentDidMount() {
        getQuestionDetail({ id: this.props.match.params.id }).then(res => {
            if (!String(res.is_audit)) return;
            const { types, type, subject, complexity, content, a, b, c, d, e, f,
                answer, answer_that, is_audit ,img,is_jc} = res;
            this.setState({
                bank: types.split(','),
                type: type + '',
                subject: subject && subject.split(',').map(Number),
                hardLevel: complexity + '',
                content,
                answerA: a,
                answerB: b,
                answerC: c,
                answerD: d,
                answerE: e,
                answerF: f,
                answer,
                answerIntroduce: answer_that,
                audit: is_audit + '',
                old_img:img,
                fileList:[ {
                    uid: '-1',
                    name: img,
                    status: 'done',
                    url: fileurl(is_jc)+img,
                    thumbUrl: fileurl(is_jc)+img,
                  }]
            })
        })
        getSubject().then((res) => {
            if (!res || !res[0]) return;
            let data = JSON.stringify(res);
            let data2 = JSON.stringify(res);
            data = data.replace(/id/g, 'key').replace(/pkey/g, 'pid');
            data2 = data2
                .replace(/id/g, 'value')
                .replace(/title/g, 'label')
                .replace(/pvalue/g, 'pid');
            this.setState({
                subjectTreeData: JSON.parse(data),
                subjectOptions: JSON.parse(data2),
            });
        });
    }

    render() {
        const { subjectOptions, bank, subject, type, hardLevel, content, answer, answerIntroduce,
            answerA, answerB, answerC, answerD, answerE, answerF ,fileList,old_img} = this.state;
        const styles = {
            width: '95%', marginBottom: 5
        }
        const answerList = [
            { value: 'A', label: 'A' },
            { value: 'B', label: 'B' },
            { value: 'C', label: 'C' },
            { value: 'D', label: 'D' },
            { value: 'E', label: 'E' },
            { value: 'F', label: 'F' },
        ]
        return (
            <Card>
                <Form>
                    <FormItem {...layout} required label="所属题库">
                        <QuestionBankCheckbox value={bank} onChange={this.changeBank} />
                    </FormItem>
                    <FormItem {...layout} required label="所属科目">
                    <Cascader options={subjectOptions} value={subject} onChange={(e:any)=>this.changeValue(e,'subject')} />
                    </FormItem>
                    <FormItem {...layout} required label="所属题型">
                        <QuestionTypeSelect isModal={true} onChange={this.changeType} value={type} />
                    </FormItem>
                    <FormItem {...layout} label="难易程度">
                        <HardLevel isModal={true} value={Number(hardLevel) ? hardLevel : ''} onChange={this.changeHardLevel} />
                    </FormItem>
                    <FormItem {...layout} required label="试题内容">
                    <Input.TextArea value={content} style={{ height: 220 }} onChange={(e:any)=>this.changeValueWithTarget(e,'content')} />
                    </FormItem>
                    <FormItem {...layout}  label="内容图片">
                        <Upload accept=".jpg,.png,.gif" fileList={fileList} onChange={this.changeFileList}><Button>上传图片</Button></Upload>
                    </FormItem>
                    {
                        (type === '1' || type === '2') && <FormItem {...layout} required label="答案选项">
                            <div>A：<Input style={styles} onChange={(e:any)=>this.changeValueWithTarget(e,'answerA')} value={answerA}></Input></div>
                                    <div>B：<Input style={styles} onChange={(e:any)=>this.changeValueWithTarget(e,'answerB')} value={answerB}></Input></div>
                                    <div>C：<Input style={styles} onChange={(e:any)=>this.changeValueWithTarget(e,'answerC')} value={answerC}></Input></div>
                                    <div>D：<Input style={styles} onChange={(e:any)=>this.changeValueWithTarget(e,'answerD')} value={answerD}></Input></div>
                                    <div>E：<Input style={styles} onChange={(e:any)=>this.changeValueWithTarget(e,'answerE')} value={answerE}></Input></div>
                                    <div>F：<Input style={styles} onChange={(e:any)=>this.changeValueWithTarget(e,'answerF')} value={answerF}></Input></div>
                        </FormItem>
                    }

                    <FormItem {...layout} required label="参考答案">
                    {
                                    type === '1' && <RadioGroup options={answerList} onChange={(e:any)=>this.changeValueWithTarget(e,'answer')} value={answer} />
                                }
                                {
                                    type === '2' && <CheckboxGroup options={answerList} onChange={(e:any)=>this.changeValue(e,'answer')} value={answer} />
                                }
                                {
                                    type === '3' && <RadioGroup value={answer} onChange={(e:any)=>this.changeValueWithTarget(e,'answer')}>
                                        <Radio value="正确">正确</Radio>
                                        <Radio value="错误">错误</Radio>
                                    </RadioGroup>
                                }
                    </FormItem>
                    <FormItem {...layout} label="答案解析">
                    <Input value={answerIntroduce} onChange={(e:any)=>this.changeValueWithTarget(e,'answerIntroduce')} />
                    </FormItem>
                    {/* <FormItem {...layout} required label="是否审核">
                        <RadioGroup value={audit} onChange={this.changeAudit}>
                            <Radio value="0">不需要审核</Radio>
                            <Radio value="1">需要审核</Radio>
                        </RadioGroup>
                    </FormItem> */}
                    <FormItem  {...taillayout}>
                        <Button type="primary" style={{ marginRight: 30 }} onClick={this.submitHandle}>提交</Button>
                        <Button onClick={this.goBack}>返回</Button>
                    </FormItem>
                </Form>
            </Card>
        )
    }
}
